<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE> ZTREE DEMO - Simple Data</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="third/zTree_v3/css/demo.css" type="text/css">
	<link rel="stylesheet" href="css/zTreeStyle.css" type="text/css">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css">
	<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.js"></script>
	<script type="text/javascript" src="js/jquery.ztree.exedit-3.5.js"></script>
	<SCRIPT type="text/javascript">

	var setting = {
			view: {
				dblClickExpand: false
			},
			check: {
				enable: true
			},
			callback: {
				onRightClick: OnRightClick
			}
		};

		function OnRightClick(event, treeId, treeNode) {
			if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
				zTree.cancelSelectedNode();
				showRMenu("root", event.clientX, event.clientY);
			} else if (treeNode && !treeNode.noR) {
				zTree.selectNode(treeNode);
				showRMenu("node", event.clientX, event.clientY);
			}
		}

		function showRMenu(type, x, y) {
			$("#rMenu ul").show();
			if (type=="root") {
				$("#m_del").hide();
				$("#m_check").hide();
				$("#m_unCheck").hide();
			} else {
				$("#m_del").show();
				$("#m_check").show();
				$("#m_unCheck").show();
			}
			rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

			$("body").bind("mousedown", onBodyMouseDown);
		}
		function hideRMenu() {
			if (rMenu) rMenu.css({"visibility": "hidden"});
			$("body").unbind("mousedown", onBodyMouseDown);
		}
		function onBodyMouseDown(event){
			if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
				rMenu.css({"visibility" : "hidden"});
			}
		}
		var addCount = 1;
		function addTreeNode() {
			hideRMenu();
			var newNode = { name:"增加" + (addCount++)};
			if (zTree.getSelectedNodes()[0]) {
				newNode.checked = zTree.getSelectedNodes()[0].checked;
				zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
			} else {
				zTree.addNodes(null, newNode);
			}
		}

		function add() {
			$("#myModal").modal();

		}


		
		function removeTreeNode() {
			hideRMenu();
			var nodes = zTree.getSelectedNodes();
			if (nodes && nodes.length>0) {
				if (nodes[0].children && nodes[0].children.length > 0) {
					var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
					if (confirm(msg)==true){
						zTree.removeNode(nodes[0]);
					}
				} else {
					zTree.removeNode(nodes[0]);
				}
			}
		}
		function checkTreeNode(checked) {
			var nodes = zTree.getSelectedNodes();
			if (nodes && nodes.length>0) {
				zTree.checkNode(nodes[0], checked, true);
			}
			hideRMenu();
		}
		function resetTree() {
			hideRMenu();
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		}

// 		var zTree, rMenu;
// 		$(document).ready(function(){
// 			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
// 			zTree = $.fn.zTree.getZTreeObj("treeDemo");
// 			rMenu = $("#rMenu");
// 		});

		$(function(){
			$.ajax({
			    url: "http://localhost:8086/medical/RoleServlet",
//	 		    contentType: "application/json",
			    type: "post",
			    dataType:'json',
			    async: false,
			    success: function (result) {
			        // list是后端已经格式好的数据列表
// 			        zNodes = result;
// 			        console.log(JSON.stringify(zNodes))
//	 		        zNodes = JSON.stringify(result);
//	 		        console.log("result" + reslut);
			    }
			});
		});

		var zNodes =[
			{id:1, name:"无右键菜单 1", open:true, noR:true,
				children:[
					   {id:11, name:"节点 1-1", noR:true},
					   {id:12, name:"节点 1-2", noR:true}

				]},
			{id:2, name:"右键操作 2", open:true,
				children:[
					   {id:21, name:"节点 2-1"},
					   {id:22, name:"节点 2-2"},
					   {id:23, name:"节点 2-3"},
					   {id:24, name:"节点 2-4"}
				]},
			{id:3, name:"右键操作 3", open:true,
				children:[
					   {id:31, name:"节点 3-1"},
					   {id:32, name:"节点 3-2"},
					   {id:33, name:"节点 3-3"},
					   {id:34, name:"节点 3-4"}
				]}
  	 	];

		var zTree, rMenu;
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			zTree = $.fn.zTree.getZTreeObj("treeDemo");
			rMenu = $("#rMenu");
		});

	/* 	zNodes = [
// 			{ id:1, pId:0, name:"父节点1111111 - 展开", open:true},
// 			{ id:11, pId:1, name:"父节点11 - 折叠"},
// 			{ id:111, pId:11, name:"叶子节点111"},
// 			{ id:112, pId:11, name:"叶子节点112"},
// 			{ id:113, pId:11, name:"叶子节点113"},
// 			{ id:114, pId:11, name:"叶子节点114"},
			{"name":"清华大学","pId":0,"id":1},
			{"name":"软件工程学院","pId":1,"id":2},
			{"name":"国际贸易学院","pId":2,"id":3},
			{"name":"土木工程学院","pId":2,"id":4},
			{"name":"机电学院","pId":2,"id":5},
			{"name":"软件测试专业","pId":0,"id":6},
			{"name":"游戏开发专业","pId":2,"id":7},
			{"name":"C001班","pId":6,"id":8},
			{"name":"C002班","pId":6,"id":9},
			{"name":"对外贸易专业","pId":0,"id":10},
			{"name":"D001班","pId":10,"id":11},
			{"name":"D002班","pId":10,"id":12}]; */

// 		var zNodes =[
// 			{ id:1, pId:0, name:"父节点1111111 - 展开", open:true},
// 			{ id:11, pId:1, name:"父节点11 - 折叠"},
// 			{ id:111, pId:11, name:"叶子节点111"},
// 			{ id:112, pId:11, name:"叶子节点112"},
// 			{ id:113, pId:11, name:"叶子节点113"},
// 			{ id:114, pId:11, name:"叶子节点114"},
// 			{ id:12, pId:1, name:"父节点12 - 折叠"},
// 			{ id:121, pId:12, name:"叶子节点121"},
// 			{ id:122, pId:12, name:"叶子节点122"},
// 			{ id:123, pId:12, name:"叶子节点123"},
// 			{ id:124, pId:12, name:"叶子节点124"},
// 			{ id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
// 			{ id:2, pId:0, name:"父节点2 - 折叠"},
// 			{ id:21, pId:2, name:"父节点21 - 展开", open:true},
// 			{ id:211, pId:21, name:"叶子节点211"},
// 			{ id:212, pId:21, name:"叶子节点212"},
// 			{ id:213, pId:21, name:"叶子节点213"},
// 			{ id:214, pId:21, name:"叶子节点214"},
// 			{ id:22, pId:2, name:"父节点22 - 折叠"},
// 			{ id:221, pId:22, name:"叶子节点221"},
// 			{ id:222, pId:22, name:"叶子节点222"},
// 			{ id:223, pId:22, name:"叶子节点223"},
// 			{ id:224, pId:22, name:"叶子节点224"},
// 			{ id:23, pId:2, name:"父节点23 - 折叠"},
// 			{ id:231, pId:23, name:"叶子节点231"},
// 			{ id:232, pId:23, name:"叶子节点232"},
// 			{ id:233, pId:23, name:"叶子节点233"},
// 			{ id:234, pId:23, name:"叶子节点234"},
// 			{ id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
// 		];

// 		$(document).ready(function(){
// 			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
// 		});

	</SCRIPT>
 </HEAD>

<style type="text/css">
div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
div#rMenu ul li{
	margin: 1px 0;
	padding: 0 5px;
	cursor: pointer;
	list-style: none outside none;
	background-color: #DFDFDF;
}
	</style>

<BODY>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>

</div>
<div id="rMenu">
	<ul>
		<li id="m_add" onclick="add();">增加节点</li>
<!-- 		<li id="m_add" onclick="addTreeNode();">增加节点</li> -->
		<li id="m_del" onclick="removeTreeNode();">删除节点</li>
		<li id="m_check" onclick="checkTreeNode(true);">Check节点</li>
		<li id="m_unCheck" onclick="checkTreeNode(false);">unCheck节点</li>
		<li id="m_reset" onclick="resetTree();">恢复zTree</li>
	</ul>
</div>

<!--模态框组件-->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header">
                    <h3>提示</h3>
                </div>
                <div class="modal-body">
                    <p>确定要关闭警告框信息？</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-info" data-dismiss="modal">关闭</button>
                </div>
        </div>
    </div>
</div>

</BODY>
</HTML>